<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" size="small" label-width="100">
      <el-form-item label="输入搜索：">
        <el-input v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchBrandList" type="primary" size="small"> 搜索 </el-button>
        <el-button class="btn-add" size="small" @click="addBrand"> 添加 </el-button>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <el-table ref="brandTable" :data="list" height="100%" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="80" align="center">
          <template #default="scoped">{{ scoped.row.id }}</template>
        </el-table-column>
        <el-table-column label="品牌名称" align="center">
          <template #default="scoped">{{ scoped.row.name }}</template>
        </el-table-column>
        <el-table-column label="品牌首字母" width="100" align="center">
          <template #default="scoped">{{ scoped.row.firstLetter }}</template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template #default="scoped">{{ scoped.row.sort }}</template>
        </el-table-column>
        <el-table-column label="品牌制造商" width="100" align="center">
          <template #default="scoped">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scoped.row.factoryStatus"
              @change="handleFactoryStatusChange(scoped.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" width="100" align="center">
          <template #default="scoped">
            <el-switch :active-value="1" :inactive-value="0" v-model="scoped.row.showStatus" @change="handleShowStatusChange(scoped.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="相关" width="220" align="center">
          <template #default>
            <span>商品：</span>
            <el-button size="small" text>100 </el-button>
            <span>评价：</span>
            <el-button size="small" text>1000 </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" text @click="handleUpdate(row)"> 编辑 </el-button>
            <el-button size="small" text type="danger" @click="handleDelete(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-select size="small" v-model="operateType" placeholder="批量操作">
        <el-option v-for="item in BRAND_TYPE_MAP" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-button class="search-button" type="primary" size="small" @click="handleBatchOperate"> 确定 </el-button>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        v-model:current-page="listQuery.pageNum"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { fetchList, updateShowStatus, updateFactoryStatus, deleteBrand } from '@/api/brand'
import { BRAND_TYPE_MAP } from '@/constant'
import type { Brand, BrandPageDto } from '@/models/brand'

defineOptions({ name: 'BrandList' })
const router = useRouter()

const operateType = ref(null)
const listQuery = ref<BrandPageDto>({
  pageNum: 1,
  pageSize: 10,
})
const list = ref<Brand[]>([])
const total = ref(0)
const listLoading = ref(true)
const multipleSelection = ref<Brand[]>([])

const getList = async () => {
  listLoading.value = true
  try {
    const res = await fetchList(listQuery.value)
    listLoading.value = false
    list.value = res.data.data.list
    total.value = res.data.data.total
    listQuery.value.pageSize = res.data.data.pageSize
  } finally {
    listLoading.value = false
  }
}
const handleSelectionChange = (val: Brand[]) => {
  multipleSelection.value = val
}
const handleUpdate = (row: Brand) => {
  router.push({ path: '/pms/brand/upsert', query: { id: row.id } })
}
const handleDelete = async (row: Required<Brand>) => {
  await ElMessageBox.confirm('是否要删除该品牌', '提示', { type: 'warning' })
  await deleteBrand(row.id)
  ElMessage.success('删除成功！')
  getList()
}

const handleFactoryStatusChange = async (row: Required<Brand>) => {
  const params = {
    ids: row.id + '',
    factoryStatus: row.factoryStatus,
  }
  try {
    await updateFactoryStatus(params)
    ElMessage.success('修改成功！')
  } catch {
    row.factoryStatus = row.factoryStatus === 0 ? 1 : 0
  }
}
const handleShowStatusChange = async (row: Required<Brand>) => {
  const params = {
    ids: row.id + '',
    showStatus: row.showStatus,
  }
  try {
    await updateShowStatus(params)
    ElMessage.success('修改成功！')
  } catch {
    row.showStatus = row.showStatus === 0 ? 1 : 0
  }
}
const handleSizeChange = (val: number) => {
  listQuery.value.pageNum = 1
  listQuery.value.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  listQuery.value.pageNum = val
  getList()
}
const searchBrandList = () => {
  listQuery.value.pageNum = 1
  getList()
}
const handleBatchOperate = async () => {
  if (!operateType.value) {
    ElMessage.warning('请选择批量操作类型')
    return
  }
  if (multipleSelection.value.length < 1) {
    ElMessage.warning('请选择一条记录')
    return
  }
  let showStatus = operateType.value === 'showBrand' ? 1 : 0
  const params = {
    ids: multipleSelection.value.map((item) => item.id as number).join(','),
    showStatus: showStatus,
  }
  await updateShowStatus(params)
  getList()
  ElMessage.success('修改成功')
}
const addBrand = () => {
  router.push({ path: '/pms/brand/upsert' })
}
getList()
</script>
